<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body{
            background: url("../img/bg.png");
        }
        .center{
            /*居中对齐*/
            text-align: center;
            /*背景颜色*/
            background: white;
            /*宽度*/
            width: 400px;
            /*外边距*/
            margin: auto;
        }
    </style>
</head>
<body>
    <!--黑马标志-->
    <div><img src="../img/logo.png"/></div>

    <!--注册的表单部分-->
    <div class="center">
        <div>注册详情</div>
        <hr/>

        <form action="#" method="get">
            <div>
                <label for="username">姓名: </label>
                <input type="text" id="username" name="username" value="" placeholder="在此输入姓名" required/>
            </div>

            <div>
                <label for="password">密码: </label>
                <input type="password" id="password" name="password" value="" placeholder="在此输入密码" required/>
            </div>

            <div>
                <label for="email">邮箱: </label>
                <input type="email" id="email" name="email" value="" placeholder="在此输入邮箱" required/>
            </div>
            <div>
                <label for="tel">手机: </label>
                <input type="tel" id="tel" name="tel" value="" placeholder="在此输入手机" required/>
            </div>
            <hr/>

            <div>
                <label for="gender">性别: </label>
                <input type="radio" id="gender" name="tel" value="men" required/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="tel" value="women" required/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>

            <div>
                <label for="hobby">爱好: </label>
                <input type="checkbox" id="hobby" name="hobby" value="music" required/>音乐
                <input type="checkbox" name="hobby" value="movie" required/>电影
                <input type="checkbox" name="hobby" value="game" required/>游戏
            </div>

            <div>
                <label for="birthday">出生日期</label>
                <input type="date" id="birthday" name="birthday" value=""/>
            </div>

            <div>
                <label for="city">所在城市</label>
                <select id="city" name="city">
                    <option>---请选择所在城市---</option>
                    <optgroup label="直辖市">
                        <option>重庆</option>
                        <option>上海</option>
                        <option>北京</option>
                        <option>深圳</option>
                    </optgroup>
                    <optgroup label="省会">
                        <option>南京</option>
                        <option>合肥</option>
                        <option>郑州</option>
                        <option>武汉</option>
                    </optgroup>
                </select>
            </div>
            <hr/>

            <div>
                <label for="desc">个性签名: </label>
                <textarea id="desc" name="desc" rows="5" cols="40" placeholder="请写下你的与众不同"></textarea>
            </div>

            <!--按钮-->
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </form>
    </div>
</body>
</html>